<template>
    <div class="introduct">
        <div class="main-title">
            <img class="icon" src="@/assets/images/introduct-icon.png" alt="">
            <span>简介</span>
        </div>
        <div class="rich-text-desc">
            <div @click="proxyClick">
                <div class="rich-text" v-html="data.description" @click="(e) => isApp && e.preventDefault()"></div>
            </div>
        </div>
        <div class="teachers" v-if="teacherList.length">
            <p class="title">教师团队</p>
            <ul class="list">
                <li class="t-item" v-for="(item) in teacherList" :key="item.id">
                    <img :src="item.picture" alt="" class="pic">
                    <div class="info">
                        <span class="name">{{item.name}}</span>
                        <span class="place">{{item.workPlace}}</span>
                        <div class="desc">
                            <text-overflow :info="item.description || '暂无简介'" :lineClamp="2" :lineHeight="20"/>
                            <!-- <div class="content" :ref="el => titleRefs[index] = el" :class="{'show-more': item.more}">
                                {{item.description || '暂无简介'}}
                                <span class="show-all show" v-if="hasMore(index)" v-show="!item.more" @click.stop="flat(item, true)"><span class="clip">...&nbsp;</span>全文</span>
                                <span class="show-all hide" v-if="hasMore(index)" v-show="item.more" @click.stop="flat(item, false)">收起</span>
                            </div> -->
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, toRefs,ref, reactive, toRef, computed, onMounted, watch } from "vue"
import TextOverflow from '@/components/text-fold.vue'
import envJudge from '@/lib/judge-env';
import {useStore} from 'vuex'

const props =defineProps({
    data: {
        default: () => {},
        type: Object
    }
})

const store = useStore();
const teacherList = ref([])
const titleRefs = ref([])
const env = envJudge();
const isApp = reactive(['IOS', 'android'].includes(env));

watch(() => props.data, (val) => {
    if(Object.keys(val).length){
        let list = val?.courseList || []
        teacherList.value = list.length && list[0].lecturerList.map(item => ({...item, more: false})) || []
    }
}, {deep: true})
// 简介是否超出最大长度
function hasMore(i){
    return titleRefs.value[i] && titleRefs.value[i].scrollHeight > 20 * 2 || false
}
// 展开收起
function flat(item, type){
    item.more = type
}
function proxyClick(e){
    if(!isApp) return
    if(e.target.localName.toLowerCase() === 'a'){
        console.log(e.target.getAttribute('href'), 'href')
        const url = e.target.getAttribute('href') || ''
        jumpPage(url, {}, {}, false)
    }
}
function jumpPage(url = '', params = {}, query = {}, pullRefresh){
    store.dispatch('jsBridge/disposeBridge', {
        method: 'goNewPage',
        url,
        naviBarHidden: false,
        data: {
            pullRefresh
        }
    })
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .introduct{
        width:100%;
        padding: 24px 15px 0;
        box-sizing: border-box;
        .main-title{
            font-size: 16px;
            font-weight: 600;
            color: #171A1D;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .icon{
                width:16px;
                height:16px;
                margin-right: 4px;
            }
        }
        .rich-text{
            padding-bottom: 15px;
            border-bottom: 1px solid #E0E2E4;
        }
        .teachers{
            margin-top: 15px;
            .title{
                font-size: 13px;
                font-weight: 400;
                color: #171A1D;
                line-height: 22px;
                margin-bottom: 10px;
            }
            .list{
                .t-item{
                    display: flex;
                    align-items: flex-start;
                    // justify-content: space-between;
                    margin-bottom: 15px;
                    .pic{
                        width:70px;
                        height:94px;
                        border-radius: 4px;
                        margin-right: 12px;
                    }
                    .info{
                        display: inline-flex;
                        flex-direction: column;
                        align-items: flex-start;
                        font-size: 13px;
                        font-weight: 400;
                        color: #6E7074;
                        line-height: 20px;
                        margin-top: 3px;
                        flex: 1;
                        word-break: break-all;
                        .name{
                            font-size: 13px;
                            font-weight: 600;
                            color: #171A1D;
                        }
                        .place{
                            margin: 4px 0;
                        }
                        .desc{
                            display: flex;
                            min-width: 0;
                            width: 100%;
                            .content{
                                position: relative;
                                max-height: 19 * 2px;
                                overflow: hidden;
                                line-height: 20px;
                            }
                            .show-more{
                                height: auto;
                                max-height: 9999px;
                            }
                            
                            .show-all{
                                color: #0084F6;
                                .clip{
                                    color: #6E7074;
                                }
                            }
                            .show{
                                padding-left: 10px;
                                padding-right: 4px;
                                display: inline-flex;
                                align-items: flex-end;
                                background-color: #fff;
                                position: absolute;
                                right: 0;
                                bottom: 0;
                            }
                            .hide{
                                white-space: nowrap;
                            }
                        }
                    }
                }
                .t-item:last-child{
                    margin-bottom: 20px;
                }
            }
        }
    }
 
</style>
<style lang="scss">
    .rich-text-desc {
        color: #111a38;
        width: 100%;
        word-break: break-all;
        overflow: hidden;
        white-space: pre-wrap;
        * {
            position: relative!important;
            max-width: 100%;
            overflow: hidden;
        }
        em {
            font-style: italic;
        }
        img {
            cursor: pointer;
            max-width: 100%;
            height: auto;
        }
        a {
            text-decoration: none;
        }
        iframe {
            width: 100%;
        }
        p {
            line-height: 1.6;
            margin: 0px;
        }
        table {
            word-wrap: break-word;
            word-break: break-all;
            max-width: 100%;
            border: none;
            border-color: #999;
        }
        .mce-object-iframe {
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        ul,
        ol {
            list-style-position: inside;
        }
        ul{
            list-style: inherit;
            list-style-position: inside;
        }
        li {
            list-style: inside;
        }
        strong {
            font-weight: bold;
        }
    }
</style>
